<template>
  <div class="box">
    <ul class="rdilist rdilist-2 f-cb">
      <li v-for="item in hotRadios" :key="item.id">
        <a href="javascript:;" @click="goRoute('/find/djradio/', item.id)" class="cvr u-cover u-cover-rdi f-fl">
          <img :src="item.picUrl" alt="" />
        </a>
        <div class="cnt">
          <h3 class="f-fs3">
            <a href="javascript:;" @click="goRoute('/find/djradio/', item.id)"  :title="item.name">{{
              item.name
            }}</a>
          </h3>
          <p class="note">
            <i class="u-icn u-icn-27"></i>
            <a
              href="javascript:;"
              class="sep"
              :title="item.dj.nickname"
              >{{ item.dj.nickname }}</a
            >
            <sup class="icn u-icn2 u-icn2-music2 "></sup>
          </p>
          <p class="s-fc4">
            共{{ item.programCount }}期&nbsp;&nbsp;&nbsp;&nbsp;订阅{{
              item.subCount
            }}次
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["id", "offset"],
  data: () => ({
    hotRadios: [],
  }),
  created() {
    // console.log(this.id, this.offset);
    this.getAllRadios(this.id, this.offset);
  },
  updated() {
    // console.log(this.id, this.offset);
    this.getAllRadios(this.id, this.offset);
  },
  methods: {
    async getAllRadios(id, offset) {
      const {
        data: { djRadios },
      } = await this.Api.wjwApi.getAllRadios(id, offset);
      this.hotRadios = djRadios;
      // console.log(djRadios);
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  .f-cb:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
  }
  a {
    text-decoration: none;
  }
  em {
    font-style: normal;
  }
  li {
    list-style: none;
  }
  .f-fl {
    float: left;
  }
  .f-fr {
    float: right;
  }
  .rdilist {
    margin-left: -30px;
    li {
      float: left;
      width: 435px;
      height: 120px;
      margin-left: 30px;
      _margin-left: 15px;
      padding: 20px 0;
      border-bottom: 1px solid #e7e7e7;
      .cvr {
        margin-right: -200px;
      }
      .u-cover-rdi {
        width: 120px;
        height: 120px;
      }
      .u-cover {
        position: relative;
        display: block;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .cnt {
        margin-left: 140px;
        h3 {
          height: 64px;
          margin: 0;
          line-height: 64px;
          a {
            display: inline-block;
            line-height: normal;
            vertical-align: middle;
            color: #333;
            font-size: 18px;
          }
        }
        .note {
          margin-bottom: 6px;
          line-height: 20px;
          .u-icn,
          .u-icn2,
          .u-icn3 {
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;

            background: url("../../assets/wjwimgs/icon.png") no-repeat 0 9999px;
          }
          .u-icn-27 {
            width: 14px;
            height: 15px;
            background-position: -50px -300px;
          }
          .sep {
            margin-left: 5px;
            margin-right: 4px;
            word-wrap: break-word;
            word-break: break-word;
            white-space: normal;
            font-size: 12px;
            color: #333;
          }
          .u-icn2 {
            background: url("../../assets/wjwimgs/icon2.png") no-repeat 0 9999px;
          }
          .u-icn2-music2 {
            width: 12px;
            height: 13px;
            background-position: -110px -190px;
          }
        }
        .s-fc4 {
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
